<template>
    <div>
      <div style="display: flex;">

        <div style="display: flex;align-items: center;margin: 30px 30px;">
            <div>推荐类型</div>
            <el-select style="margin: 0 10px ;" v-model="inputRecommendType" placeholder="推荐类型" @change="changeRecommendTyle">
            <el-option v-for="item in recommendTyleList" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
        </el-select>
        </div>


        <div style="display: flex;align-items: center;margin: 30px 30px;">
                <div>选择专家</div>
                <el-select style="margin: 0 10px ;" v-model="inputName" placeholder="选择专家" @change="handleChangeExpert">
                <el-option v-for="item in expertDataList" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            </div>
            <div style="display: flex;align-items: center;margin: 30px 30px;">
                <div>是否不中退</div>
                <el-select style="margin: 0 10px ;" v-model="inputNowin" placeholder="是否不中退" @change="changeNowin">
                <el-option v-for="item in noWin" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            </div>
            <div style="display: flex;align-items: center;margin: 30px 30px;">
                <div style="margin: 0 10px ;">手机号搜索</div>
                <el-input style="width: 200px;" v-model="inputData" placeholder="输入手机号搜索" @input="getInput"></el-input>
            </div>



      </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="查看时间" align="center">
            </el-table-column>
        </el-table>
        <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    </div>
</template>

<script>
import { viewRecords,expertList } from '../../../libs/api'
export default {
    data() {
        return {
            currentPage: 1,
            PageSize: 10,
            tableData:[],
            pageSizes: [5, 10],
            totalCount: 1,
            inputName:'',
            expertDataList:[],
            noWin:[{
              nickname:'是',
              id:1
            },{
              nickname:'否',
              id:2
            }],
            inputNowin:'',

            recommendTyleList:[{
              nickname:'足球篮球',
              id:1
            },{
              nickname:'14场',
              id:2
            }],
            inputRecommendType:1,
            inputData:''
        }
    },
    created() {
    this.getviewRecords()
    this.getExpertList()
  },
    methods: {
      handleChangeExpert(value){
            this.getviewRecords()
            console.log(value)
        },
        changeNowin(value){
          this.getviewRecords()
        },
        changeRecommendTyle(value){
          this.getviewRecords()
        },
       // 获取专家
       getExpertList() {
            expertList({
                page: 1,
                limit: 1000
            }).then(res => {
                this.expertDataList = res.data.list
            })
        },
        // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getviewRecords()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getviewRecords()
    },
        getviewRecords(){
            viewRecords({
            page: this.currentPage,
            limit: this.PageSize,
            expert_id:this.inputName,
            no_win_back:this.inputNowin,
            type:this.inputRecommendType,
            mobile:this.inputData
      }).then(res => {
        console.log('接口1', res)
        this.tableData = res.data.list
        this.totalCount = res.data.total
      })
        },
        getInput() {
          viewRecords({
            page: this.currentPage,
            limit: this.PageSize,
            expert_id:this.inputName,
            no_win_back:this.inputNowin,
            type:this.inputRecommendType,
            mobile:this.inputData
      }).then(res => {
        this.tableData = res.data.list
        this.totalCount = res.data.total
      })
        },
    }
}
</script>

<style>

</style>
